<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生日快乐</title>
    <!-- 引入Tailwind CSS -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- 引入Font Awesome -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        birthday: {
                            pink: '#FF6B8B',
                            purple: '#A77DC2',
                            yellow: '#FFD166',
                            blue: '#118AB2',
                            green: '#06D6A0',
                            red: '#EF476F'
                        }
                    },
                    fontFamily: {
                        birthday: ['"Comic Sans MS"', '"Marker Felt"', 'cursive']
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .text-shadow {
                text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
            }
            .text-shadow-lg {
                text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.4);
            }
            .animate-float {
                animation: float 3s ease-in-out infinite;
            }
            .animate-pulse-slow {
                animation: pulse 4s cubic-bezier(0.4, 0, 0.6, 1) infinite;
            }
            .animate-spin-slow {
                animation: spin 8s linear infinite;
            }
        }
        
        /* 全局动画定义 */
        @keyframes float {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(-10px); }
        }
        
        /* 蜡烛火焰动画 */
        .flame {
            animation: flame 0.5s infinite alternate;
            transform-origin: bottom center;
        }
        
        @keyframes flame {
            0% { transform: scale(1) rotate(-2deg); }
            100% { transform: scale(1.1) rotate(2deg); }
        }
        
        /* 礼物盒打开动画 */
        .gift-opened .gift-top {
            transform: translateY(-50px) rotateX(180deg);
        }
        
        /* 闪烁动画 */
        @keyframes twinkle {
            0%, 100% { opacity: 1; }
            50% { opacity: 0.6; }
        }
        
        .twinkle {
            animation: twinkle 1.5s infinite;
        }
        
        /* 吹灭蜡烛的烟雾效果 */
        .smoke {
            position: absolute;
            border-radius: 50%;
            background-color: rgba(255, 255, 255, 0.6);
            opacity: 0;
            z-index: 5;
        }
    </style>
</head>
<body class="bg-gradient-to-br from-birthday-pink/20 to-birthday-purple/20 min-h-screen font-birthday overflow-x-hidden">
    <!-- 背景音乐 -->
    <audio id="birthdayMusic" loop>
        <source src="https://music.163.com/song/media/outer/url?id=2676635149.mp3" type="audio/mpeg">
    </audio>
    
    <!-- 贺卡弹窗 -->
    <div id="cardPopup" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70">
        <div class="bg-white rounded-3xl shadow-2xl w-full max-w-2xl transform transition-all duration-500 scale-100 rotate-0">
            <div class="relative overflow-hidden rounded-t-3xl h-48 md:h-64 bg-gradient-to-r from-birthday-pink to-birthday-purple">
                <div class="absolute inset-0 flex items-center justify-center">
                    <i class="fa fa-gift text-white text-6xl md:text-8xl animate-float"></i>
                </div>
                <!-- 装饰元素 -->
                <div class="absolute top-4 left-4 w-8 h-8 bg-white/30 rounded-full animate-pulse-slow"></div>
                <div class="absolute bottom-6 right-8 w-6 h-6 bg-white/20 rounded-full animate-pulse-slow" style="animation-delay: 0.5s"></div>
                <div class="absolute top-1/3 right-1/4 w-10 h-10 bg-white/25 rounded-full animate-pulse-slow" style="animation-delay: 1s"></div>
            </div>
            
            <div class="p-6 md:p-8 text-center">
                <h2 class="text-[clamp(1.8rem,5vw,3rem)] font-bold text-birthday-purple mb-4 text-shadow">刘奕含生日快乐！</h2>
                <p class="text-gray-600 text-lg md:text-xl mb-8">今天是你的生日，准备好庆祝这个特别的日子了吗？</p>
                <button id="openCelebration" class="bg-gradient-to-r from-birthday-pink to-birthday-purple hover:from-birthday-purple hover:to-birthday-pink text-white font-bold py-3 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 shadow-lg">
                    开始庆祝 <i class="fa fa-arrow-right ml-2"></i>
                </button>
            </div>
        </div>
    </div>
    
    <!-- 主页面内容 -->
    <div id="mainContent" class="hidden relative min-h-screen flex flex-col items-center justify-between py-8 px-4">
        <!-- 顶部标题 -->
        <div class="text-center mb-4 mt-8">
            <h1 class="text-[clamp(2rem,6vw,4rem)] font-bold text-transparent bg-clip-text bg-gradient-to-r from-birthday-pink to-birthday-purple text-shadow-lg animate-float">
                生日快乐！
            </h1>
        </div>
        
        <!-- 中间蛋糕区域 -->
        <div class="flex-grow flex items-center justify-center w-full max-w-3xl">
            <div id="cakeContainer" class="relative w-full flex justify-center">
                <!-- 生日蛋糕 -->
                <div id="birthdayCake" class="relative w-[200px] md:w-[300px] aspect-[3/4]">
                    <!-- 蛋糕底部 -->
                    <div class="absolute bottom-0 w-full h-3/5 bg-birthday-pink rounded-t-[40%] overflow-hidden">
                        <div class="absolute top-1/4 left-0 w-full h-4 bg-birthday-yellow/70"></div>
                    </div>
                    
                    <!-- 蛋糕顶部 -->
                    <div class="absolute top-1/4 w-4/5 left-1/2 transform -translate-x-1/2 h-2/5 bg-birthday-purple rounded-t-[30%] overflow-hidden">
                        <div class="absolute top-1/3 left-0 w-full h-3 bg-birthday-yellow/60"></div>
                    </div>
                    
                    <!-- 奶油装饰 -->
                    <div class="absolute top-1/4 left-1/2 transform -translate-x-1/2 -translate-y-1/4 w-3/5 h-1/6 bg-white rounded-full"></div>
                    
                    <!-- 蜡烛 -->
                    <div id="candle" class="absolute top-0 left-1/2 transform -translate-x-1/2 w-6 h-20 bg-birthday-yellow rounded-t-lg">
                        <!-- 烛芯 -->
                        <div class="absolute top-1 left-1/2 transform -translate-x-1/2 w-1 h-2 bg-gray-700"></div>
                        <!-- 火焰 -->
                        <div id="flame" class="flame absolute -top-4 left-1/2 transform -translate-x-1/2 w-4 h-6 bg-birthday-red rounded-full"></div>
                    </div>
                    
                    <!-- 蛋糕装饰 -->
                    <div class="absolute bottom-1/4 left-1/4 w-6 h-6 bg-birthday-blue rounded-full animate-pulse-slow"></div>
                    <div class="absolute bottom-1/3 right-1/4 w-5 h-5 bg-birthday-green rounded-full animate-pulse-slow" style="animation-delay: 0.7s"></div>
                    <div class="absolute top-1/2 left-1/3 w-4 h-4 bg-birthday-yellow rounded-full animate-pulse-slow" style="animation-delay: 1.2s"></div>
                </div>
                
                <!-- 吹灭提示 -->
                <div id="blowHint" class="absolute top-full left-1/2 transform -translate-x-1/2 mt-6 bg-white/80 backdrop-blur-sm px-4 py-2 rounded-full shadow-lg text-birthday-purple font-bold">
                    点击蜡烛的火光吹灭它
                </div>
            </div>
        </div>
        
        <!-- 礼物盒区域 -->
        <div id="giftsContainer" class="hidden w-full max-w-5xl mt-8 mb-4">
            <h2 class="text-center text-2xl md:text-3xl font-bold text-birthday-purple mb-6">拆开你的礼物吧！</h2>
            <div class="grid grid-cols-2 md:grid-cols-3 gap-4 md:gap-6">
                <!-- 礼物盒1 -->
                <div class="gift-box" data-index="0">
                    <div class="gift relative w-full aspect-square cursor-pointer transform transition-transform hover:scale-105">
                        <div class="gift-bottom w-full h-4/5 bg-birthday-pink rounded-md"></div>
                        <div class="gift-top absolute top-0 w-full h-1/5 bg-birthday-pink rounded-t-md transition-transform duration-500">
                            <div class="gift-ribbon-x absolute top-1/2 left-0 w-full h-3 bg-birthday-yellow transform -translate-y-1/2"></div>
                            <div class="gift-ribbon-y absolute top-0 left-1/2 w-3 h-full bg-birthday-yellow transform -translate-x-1/2"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 礼物盒2 -->
                <div class="gift-box" data-index="1">
                    <div class="gift relative w-full aspect-square cursor-pointer transform transition-transform hover:scale-105">
                        <div class="gift-bottom w-full h-4/5 bg-birthday-blue rounded-md"></div>
                        <div class="gift-top absolute top-0 w-full h-1/5 bg-birthday-blue rounded-t-md transition-transform duration-500">
                            <div class="gift-ribbon-x absolute top-1/2 left-0 w-full h-3 bg-birthday-red transform -translate-y-1/2"></div>
                            <div class="gift-ribbon-y absolute top-0 left-1/2 w-3 h-full bg-birthday-red transform -translate-x-1/2"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 礼物盒3 -->
                <div class="gift-box" data-index="2">
                    <div class="gift relative w-full aspect-square cursor-pointer transform transition-transform hover:scale-105">
                        <div class="gift-bottom w-full h-4/5 bg-birthday-green rounded-md"></div>
                        <div class="gift-top absolute top-0 w-full h-1/5 bg-birthday-green rounded-t-md transition-transform duration-500">
                            <div class="gift-ribbon-x absolute top-1/2 left-0 w-full h-3 bg-birthday-purple transform -translate-y-1/2"></div>
                            <div class="gift-ribbon-y absolute top-0 left-1/2 w-3 h-full bg-birthday-purple transform -translate-x-1/2"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 礼物盒4 -->
                <div class="gift-box" data-index="3">
                    <div class="gift relative w-full aspect-square cursor-pointer transform transition-transform hover:scale-105">
                        <div class="gift-bottom w-full h-4/5 bg-birthday-yellow rounded-md"></div>
                        <div class="gift-top absolute top-0 w-full h-1/5 bg-birthday-yellow rounded-t-md transition-transform duration-500">
                            <div class="gift-ribbon-x absolute top-1/2 left-0 w-full h-3 bg-birthday-blue transform -translate-y-1/2"></div>
                            <div class="gift-ribbon-y absolute top-0 left-1/2 w-3 h-full bg-birthday-blue transform -translate-x-1/2"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 礼物盒5 -->
                <div class="gift-box" data-index="4">
                    <div class="gift relative w-full aspect-square cursor-pointer transform transition-transform hover:scale-105">
                        <div class="gift-bottom w-full h-4/5 bg-birthday-purple rounded-md"></div>
                        <div class="gift-top absolute top-0 w-full h-1/5 bg-birthday-purple rounded-t-md transition-transform duration-500">
                            <div class="gift-ribbon-x absolute top-1/2 left-0 w-full h-3 bg-birthday-green transform -translate-y-1/2"></div>
                            <div class="gift-ribbon-y absolute top-0 left-1/2 w-3 h-full bg-birthday-green transform -translate-x-1/2"></div>
                        </div>
                    </div>
                </div>
                
                <!-- 礼物盒6 -->
                <div class="gift-box" data-index="5">
                    <div class="gift relative w-full aspect-square cursor-pointer transform transition-transform hover:scale-105">
                        <div class="gift-bottom w-full h-4/5 bg-birthday-red rounded-md"></div>
                        <div class="gift-top absolute top-0 w-full h-1/5 bg-birthday-red rounded-t-md transition-transform duration-500">
                            <div class="gift-ribbon-x absolute top-1/2 left-0 w-full h-3 bg-birthday-yellow transform -translate-y-1/2"></div>
                            <div class="gift-ribbon-y absolute top-0 left-1/2 w-3 h-full bg-birthday-yellow transform -translate-x-1/2"></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 底部装饰 -->
        <div class="w-full flex justify-center gap-2 mt-6 mb-4">
            <div class="w-3 h-3 bg-birthday-pink rounded-full animate-pulse"></div>
            <div class="w-3 h-3 bg-birthday-purple rounded-full animate-pulse" style="animation-delay: 0.3s"></div>
            <div class="w-3 h-3 bg-birthday-yellow rounded-full animate-pulse" style="animation-delay: 0.6s"></div>
            <div class="w-3 h-3 bg-birthday-blue rounded-full animate-pulse" style="animation-delay: 0.9s"></div>
            <div class="w-3 h-3 bg-birthday-green rounded-full animate-pulse" style="animation-delay: 1.2s"></div>
        </div>
    </div>
    
    <!-- 礼物详情弹窗 -->
    <div id="giftPopup" class="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/70 hidden">
        <div class="bg-white rounded-2xl shadow-2xl w-full max-w-md transform transition-all duration-300 scale-100">
            <div class="p-1">
                <div class="bg-gradient-to-r from-birthday-pink to-birthday-purple rounded-xl overflow-hidden">
                    <img id="giftImage" src="" alt="礼物图片" class="w-full h-48 md:h-64 object-cover">
                </div>
            </div>
            <div class="p-6">
                <h3 id="giftTitle" class="text-2xl font-bold text-birthday-purple mb-3"></h3>
                <p id="giftMessage" class="text-gray-600 mb-6"></p>
                <button id="closeGiftPopup" class="w-full bg-birthday-pink hover:bg-birthday-pink/80 text-white font-bold py-2 px-4 rounded-full transition-colors duration-300">
                    关闭 <i class="fa fa-times ml-1"></i>
                </button>
            </div>
        </div>
    </div>
    
    <script>
        // 礼物数据
        const gifts = [
            {
                title: "拍立得",
                message: "运动会太阳超大，我晒黑了，你管我叫小黑狗",
                image: "https://img.cdn1.vip/i/68cfef99b8098_1758457753.webp"
            },
            {
                title: "晚修",
                message: "某天晚上，我们争论霸王茶姬什么口味最好喝，我选伯牙绝弦，你给白雾红尘立了墓碑",
                image: "https://img.cdn1.vip/i/68cfefb5d569a_1758457781.webp"
            },
            {
                title: "亲爱的前桌",
                message: "我带了相机，你拍了很多张照",
                image: "https://img.cdn1.vip/i/68cfefc381805_1758457795.webp"
            },
            {
                title: "CCD",
                message: "你，我，姜姜的合照",
                image: "https://img.cdn1.vip/i/68cfeeabd0942_1758457515.webp"
            },
            {
                title: "公主和青蛙",
                message: "从前有一个王子，因为恶毒的诅咒变成了青蛙，直到他遇见了一个美丽又善良的公主......",
                image: "https://img.cdn1.vip/i/68cfee860c8c0_1758457478.webp"
            },
            {
                title: "我很想你",
                message: "生日快乐！我的刘奕含小公主~",
                image: "https://img.cdn1.vip/i/68cfee59cbf4d_1758457433.webp"
            }
        ];
        
        // DOM元素
        const cardPopup = document.getElementById('cardPopup');
        const openCelebration = document.getElementById('openCelebration');
        const mainContent = document.getElementById('mainContent');
        const candle = document.getElementById('candle');
        const flame = document.getElementById('flame');
        const blowHint = document.getElementById('blowHint');
        const giftsContainer = document.getElementById('giftsContainer');
        const giftBoxes = document.querySelectorAll('.gift-box');
        const giftPopup = document.getElementById('giftPopup');
        const giftImage = document.getElementById('giftImage');
        const giftTitle = document.getElementById('giftTitle');
        const giftMessage = document.getElementById('giftMessage');
        const closeGiftPopup = document.getElementById('closeGiftPopup');
        const birthdayMusic = document.getElementById('birthdayMusic');
        
        // 播放背景音乐
        function playMusic() {
            // 尝试自动播放音乐，处理浏览器自动播放限制
            birthdayMusic.play().catch(e => {
                console.log("自动播放失败，等待用户交互后再播放:", e);
                // 监听用户交互，一旦有交互就播放音乐
                document.addEventListener('click', () => {
                    birthdayMusic.play().catch(e => console.log("仍然无法播放音乐:", e));
                }, { once: true });
            });
        }
        
        // 初始化页面
        window.addEventListener('DOMContentLoaded', () => {
            // 播放音乐
            playMusic();
            
            // 贺卡弹窗动画
            setTimeout(() => {
                cardPopup.querySelector('div').classList.add('scale-100');
                cardPopup.querySelector('div').classList.remove('scale-0');
            }, 100);
        });
        
        // 打开庆祝页面
        openCelebration.addEventListener('click', () => {
            cardPopup.classList.add('opacity-0', 'pointer-events-none');
            setTimeout(() => {
                cardPopup.classList.add('hidden');
                mainContent.classList.remove('hidden');
            }, 500);
        });
        
        // 吹灭蜡烛功能
        let candleBlown = false;
        candle.addEventListener('click', () => {
            if (candleBlown) return;
            
            candleBlown = true;
            // 移除火焰
            flame.classList.remove('flame');
            flame.style.opacity = '0';
            
            // 隐藏提示
            blowHint.classList.add('opacity-0');
            setTimeout(() => {
                blowHint.classList.add('hidden');
            }, 500);
            
            // 创建烟雾效果
            createSmoke();
            
            // 延迟显示礼物
            setTimeout(() => {
                giftsContainer.classList.remove('hidden');
                // 为每个礼物盒添加出现动画
                giftBoxes.forEach((box, index) => {
                    setTimeout(() => {
                        box.classList.add('animate-float');
                    }, index * 200);
                });
            }, 2000);
        });
        
        // 创建烟雾效果
        function createSmoke() {
            for (let i = 0; i < 15; i++) {
                setTimeout(() => {
                    const smoke = document.createElement('div');
                    smoke.classList.add('smoke');
                    
                    // 随机大小和位置
                    const size = Math.random() * 15 + 5;
                    const offsetX = (Math.random() - 0.5) * 20;
                    
                    smoke.style.width = `${size}px`;
                    smoke.style.height = `${size}px`;
                    smoke.style.left = `calc(50% + ${offsetX}px)`;
                    smoke.style.top = '0';
                    
                    document.getElementById('cakeContainer').appendChild(smoke);
                    
                    // 烟雾动画
                    setTimeout(() => {
                        smoke.style.transition = 'all 2s ease-out';
                        smoke.style.opacity = '0.8';
                        smoke.style.transform = `translateY(-100px) scale(2)`;
                        
                        // 动画结束后移除
                        setTimeout(() => {
                            smoke.remove();
                        }, 2000);
                    }, 10);
                }, i * 100);
            }
        }
        
        // 礼物盒点击事件
        giftBoxes.forEach(box => {
            box.addEventListener('click', () => {
                const index = box.getAttribute('data-index');
                const gift = gifts[index];
                
                // 填充礼物数据
                giftImage.src = gift.image;
                giftImage.alt = gift.title;
                giftTitle.textContent = gift.title;
                giftMessage.textContent = gift.message;
                
                // 打开礼物盒动画
                box.querySelector('.gift').classList.add('gift-opened');
                
                // 显示礼物弹窗
                setTimeout(() => {
                    giftPopup.classList.remove('hidden');
                    giftPopup.querySelector('div').classList.remove('scale-0');
                    giftPopup.querySelector('div').classList.add('scale-100');
                }, 500);
            });
        });
        
        // 关闭礼物弹窗
        closeGiftPopup.addEventListener('click', () => {
            giftPopup.querySelector('div').classList.remove('scale-100');
            giftPopup.querySelector('div').classList.add('scale-0');
            setTimeout(() => {
                giftPopup.classList.add('hidden');
                // 重置所有礼物盒状态
                document.querySelectorAll('.gift').forEach(gift => {
                    gift.classList.remove('gift-opened');
                });
            }, 300);
        });
    </script>
</body>
</html>